import React from 'react';
import { connect } from 'dva';
import { Tree, Button, Table, Form, Input, Popconfirm, Tabs ,message, Icon} from 'antd';
import AssetGroupModal from '../../components/basic/AssetGroupModal';
import AssetAttrModal from '../../components/basic/AssetAttrModal';
import GroupContentModal from '../../components/basic/GroupContentModal';

const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

function AssetAttr({ dispatch, assetAttr, loading, form }) {

  const { getFieldDecorator, getFieldsValue,getFieldValue } = form;
    const { currentItem, modalVisible, modalType, attrModalType,attrModalVisible} = assetAttr

  const add = () => {
    if(assetAttr.activityKey){
      dispatch({
        type: 'assetAttr/showAttrModal',
        payload: {
           attrModalType: 'createAttr',
        },
      })
    }else{
      message.error("请选择属性组");
    }   

  }

  const addGroup = (values) => {
    dispatch({
      type: 'assetAttr/showModal',
      payload: {
        modalType: 'create',
      },
    })
  }

  const remove = (targetKey) => {
     dispatch({
      type: 'assetAttr/removePane',
      payload:{groupId:targetKey,assetTypeId:assetAttr.assetTypeId},
    });
  }

  const onEdit = (targetKey, action) => {
    remove(assetAttr.activityKey);
  }

  const loop = data => data.map((item) => {
      if (item.assetType && item.assetType.length) {
        return <TreeNode key={item.id_} title={item.name}>{loop(item.assetType)}</TreeNode>;
      }
      return <TreeNode key={item.id_} title={item.name} />;
  });

  const onSelect = (info) => {
    if(info.length > 0){
      dispatch({
        type: 'assetAttr/queryAssetAttrByTypeId',
        payload: { ...getFieldsValue(),...{'assetTypeId':info[0]} },
      });
    }
  }

  function onEditItem(){
    if(assetAttr.activityKey){
      dispatch({
        type: 'assetAttr/qryById',
        payload: assetAttr.activityKey,
      })
    }else{
      message.error("请选择属性组");
    }
     
  }

  function onChangeTab(targetKey){
    dispatch({
      type: 'assetAttr/changeTabEvent',
      payload:{groupId:targetKey,assetTypeId:assetAttr.assetTypeId},
    });
  }

  const modalProps = {
    item: modalType === 'create' ? {} : assetAttr.currentItem,
    visible: modalVisible,
    assetType :assetAttr.assetTypeTree,
    assetTypeId:assetAttr.assetTypeId,
    type: modalType,
    maskClosable: false,
    confirmLoading: loading,
    title: `${modalType === 'create' ? '新增组' : '编辑组'}`,
    wrapClassName: 'vertical-center-modal',
    newKey : assetAttr.newKey,
    onOk (data) {
      dispatch({
        type: `assetAttr/${modalType}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'assetAttr/hideModal',
      })
    },
  }

  const attrModalProps = {
    item: attrModalType === 'createAttr' ? {} : assetAttr.currentAttrItem,
    visible: attrModalVisible,
    assetType :assetAttr.assetTypeTree,
    assetTypeId:assetAttr.assetTypeId,
    assetGroupId:assetAttr.activityKey,
    isShowOptions:assetAttr.isShowOptions,
    type: attrModalType,
    maskClosable: false,
    confirmLoading: loading,
    title: `${attrModalType === 'createAttr' ? '新增属性' : '编辑属性'}`,
    wrapClassName: 'vertical-center-modal',
    newKey : assetAttr.newKey,
    onOk (data) {
      dispatch({
        type: `assetAttr/${attrModalType}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'assetAttr/hideAttrModal',
      })
    },
    onOptionChange (data) {
      dispatch({
          type: 'assetAttr/onOptionChange',
          payload: data,
      })
    },
  }

  let contentListProps={
        dispatch: dispatch,
        assetTypeId:assetAttr.assetTypeId,
        assetGroupId:assetAttr.activityKey,
        removeAttr: assetAttr.removeAttr,
        qryAttrById: assetAttr.qryAttrById,
  }

  return (
    <div style={{backgroundColor:'#fff'}}>
      <div style={{width:'250px',float: "left"}}>
        <div style={{width:'100%',backgroundColor:'#232f40',lineHeight:'40px',color:'#fff',paddingLeft:'20px',fontSize:'14px',fontWeight:'400'}}>
          资产分类信息
        </div>
        <div style={{width:'100%',}}>
          <Tree
            defaultExpandedKeys = {['1']}
            onSelect={onSelect}
          >       
           <TreeNode value="1" title="资产分类" key="1">          
            { assetAttr.assetTypeTree && loop(assetAttr.assetTypeTree) }
          </TreeNode>
          </Tree>
        </div>
      </div>
      <div style={{minHeight:'100%',marginLeft:'250px'}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',textAlign:'right',paddingLeft:'20px',paddingRight:'5px',paddingTop:'10px'}}>
            <Form layout="inline">
                <FormItem>
                    {getFieldDecorator('pid',{initialValue:assetAttr.pid})(
                        <Input type="hidden" />
                    )}
                </FormItem>

                <FormItem>
                    <Button type="primary" size='large' onClick={addGroup}>新增属性组</Button>
                </FormItem>

                <FormItem>
                    <Button type="primary" size='large' onClick={onEditItem}>编辑属性组</Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" size='large' onClick={add}>新增属性</Button>
                </FormItem>
            </Form>
        </div>
         <AssetGroupModal {...modalProps} />
         <AssetAttrModal {...attrModalProps} />

        <div style={{width:'100%'}}>
           {assetAttr.panes&&assetAttr.panes.length>0?(
             <Tabs
                hideAdd
                type="editable-card"
                activeKey={assetAttr.activityKey}
                onChange={onChangeTab}
            >
            {assetAttr.panes.map(pane => <TabPane tab={(
              <span>
                {pane.title}
                <Popconfirm title="确认删除？" onConfirm={onEdit}>
                  <Icon type="close" />
                </Popconfirm>
              </span>
              )} key={pane.key} closable={false}></TabPane>)}
            </Tabs>):""}

             <GroupContentModal contentList={assetAttr.content} {...contentListProps} />
        </div>
      </div>
    </div>
  );

}

function mapStateToProps(state) {
  return { assetAttr : state.assetAttr,loading:state.loading.models.assetAttr};
}

AssetAttr = Form.create()(AssetAttr);

export default connect(mapStateToProps)(AssetAttr);
